<template>
  <div>

    <basic-container>
      <vue-element-loading :active="loading" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
      <div class="playbox">
        <div class="playboxtitle">
          <div>
            <span>注意事项：</span>
          </div>
          <div>
            <span>1. 请先确定该账号属于该玩家，请谨慎操作。</span>
          </div>
          <div>
            <span>2. 该账号归属于该推广员以及下属才可操作。</span>
          </div>
          <div>
            <span>3. 重置密码后为初始密码(123456)</span>
          </div>
        </div>
      </div>
      <el-row style="margin-top: 20px">
        <el-col>
          <el-form :inline="true">

            <el-form-item>
              <el-input v-model="formInline.phone" clearable placeholder="手机号/账号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="formInline.idcard" clearable placeholder="身份证号码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
              <el-button icon="el-icon" type="primary" @click="onResetPl">批量重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <template>
            <el-table
              :data="tableData"
              stripe
              style="width: 100%">
              <el-table-column
                prop="account"
                label="玩家账号">
              </el-table-column>
              <el-table-column
                prop="phone"
                label="绑定手机号">
              </el-table-column>
              <el-table-column
                prop="realName"
                label="真实姓名">
              </el-table-column>
              <el-table-column
                prop="idcard"
                label="身份证号">
              </el-table-column>
              <el-table-column
                prop="registerTime"
                label="注册时间">
                <template slot-scope="scope">
                <span v-if="scope.row.registerTime!=''"><span
                  class="skucost-pruice">{{ scope.row.registerTime | formatDate('YYYY-MM-DD HH:mm:ss') }}</span></span>
                </template>
              </el-table-column>
              <el-table-column
                prop="address"
                label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="playerSwap(scope.row)">重置密码</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="[10,20, 50, 100, 200]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
        </el-col>
      </el-row>

      <el-dialog :title="mode" :visible.sync="dialogFormVisible" @close="closeDialog()" :close-on-click-modal="false" customClass="customWidthCompany">
        <div v-if="dialogFormVisible" style="text-align: center">
          <el-form :inline="true" :model="formGrant" :rules="rules" label-width="150px" class="demo-form-inline" ref="grantForm" style="margin-top: 25px">
            <el-row>
              <el-col>
                <el-form-item label="账号：" prop="account">
                  <el-input placeholder="一行一个账号" type="textarea" :rows="6" v-model="formGrant.account" clearable class="input-with-select" style="width:450px">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeDialog" style="width: 150px">取 消</el-button>
          <el-button type="primary" @click="onResetPlSuer()" style="width: 150px">确 认</el-button>
        </div>
      </el-dialog>

    </basic-container>
  </div>
</template>

<style>
.input-with-select .el-input-group__prepend {
  background-color: #fff;
  width: 100px;
}
</style>

<script>

import {  playList} from "@/api/system/details";
import {allInfo, accountDetail, resetAccountPassword, resetAccountPasswordPl} from "@/api/system/user";
import VueElementLoading from 'vue-element-loading'
export default {
  data() {
    return {
      loading: false,
      value1:null,
      form:{
        promoter:'',
        promoterPid:'',
      },
      userList: [],
      input: '',
      select: '账号名称',
      tableData: [],
      allInfo:[],
      playRoleList:[],
      dialogFormVisible: false,
      formInline: {
        idcard: '',
        phone:'',
      },
      formGrant:{
        account:''
      },
      page: {
        currentPage: 1,
        pageSize: 20,
        total: '',
      },
      row:{
        palyAccount:'',

      },
      rules: {
        promoterPid: [
          {required: true, message: '请选择', trigger: 'blur'}
        ],
      },
    }

  },

  computed: {

  },
  components: {
    VueElementLoading
  },
  created() {
    this.userInfo(3)
  },
  methods: {
    bindingRecord() {
      this.$router.push({name: '换绑记录', path: '/role/play', query: {id: ''}});
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.onSubmit();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.currentPage = val;
      this.onSubmit();
    },

    playerSwap(row) {

      this.$confirm('此操作将该账号设置为初始密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetAccountPassword(row.id).then(res => {
          console.log("resres",res)
          if(res.data.success){
            this.$message({
              type: 'success',
              message: '重置成功!'
            });
          }else{
            this.$message({
              type: 'error',
              message: res.data.msg
            });
          }

        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /* 关闭清空表单 */
    closepasswordDialog() {
      this.row = {}
      this.form.promoter=null
      this.value1=''
      this.dialogFormVisible = false;
    },
    isNotEmpty(arr) {
      return arr != null && arr.length !== 0
    },
    isEmpty(arr) {
      return !this.isNotEmpty(arr)
    },


    // selectPromoteUserP(value){
    //   this.$set(this.form, 'promoterPid', '')
    //   this.$set(this.form, 'promoter', '')
    //   if(value==''){
    //     this.userList= {};
    //   }
    //   this.form.promoterPid=value
    //   getPromoteUserP(this.form.promoterPid,4).then(res => {
    //     const data = res.data.data;
    //     this.userList = data;
    //   });
    // },
    onSubmit() {
      this.onload();
    },
    onResetPl() {
      this.dialogFormVisible = true
      this.mode = '批量重置密码';
    },
    closeDialog() {
      this.dialogFormVisible = false
      this.formGrant = {account:''}
    },
    onResetPlSuer(){
      resetAccountPasswordPl(this.formGrant.account).then(res => {
        if(res.data.success){
          this.closeDialog()
          this.$message({
            type: 'success',
            message: '重置成功!'
          });
        }else{
          this.$message({
            type: 'error',
            message: res.data.msg
          });
        }

      })
    },
    onload(){
      if(this.isEmpty(this.formInline.phone.idcard)&&this.isEmpty(this.formInline.phone)){
        this.$message({
          type: "success",
          message: "查询条件不能为空!"
        });
        return;
      }
      // if(this.select=='角色名称'){
      //   this.formInline.account=''
      //   this.formInline.roleName=this.input
      //   console.log("this.formInline.roleName",this.input)
      // }else{
      //   this.formInline.roleName=''
      //   this.formInline.account=this.input
      //   console.log("this.formInline.account",this.input)
      // }
      this.loading = true;
      accountDetail(this.page.currentPage, this.page.pageSize, Object.assign(this.formInline)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.tableData = data.records;
        this.loading = false;
      });
    },
    playList(row){
      playList(row.accountId).then(res => {
        const data = res.data.data;
        this.playRoleList = data;
      });
    },
    userInfo(level){
      allInfo(level).then(res => {
        const data = res.data.data;
        this.allInfo = data;
      });
    }
  }
}
</script>

<style>
.playbox {
  margin-top: 22px;
  width: 100%;
  background-color: #F4F4F5;
}

.playboxtitle {
  padding: 10px 18px;
  font-size: 13px;
  line-height: 18px;
  color: #909399;
}

.lab {
  display: inline-block;
  text-align: right;
  font-size: 15px;
  font-weight: 600;
  color: #606266;
}

.dialog-Width {
  width: 35%;
  background-color: #FFFFFF !important;
}
</style>
